<template>
  <sc-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')">
    <el-main>
      <!-- :hide-pagination="true"
        :hide-refresh="true" -->
      <scTable ref="table" tableName="listCustomColumn" :apiObj="apiObj" :params="search" :auto-start="false" :column="column" row-key="id" stripe>
        <template #operator="scope">
          <el-button-group>
            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">详情</el-button>

            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
              <template #reference>
                <el-button text type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </el-button-group>
        </template>
      </scTable>

      <el-dialog v-model="dialogVisible" title="查看" center>
        <v-md-preview :id="vectorDetail.id" :text="vectorDetail.content" @copy-code-success="handleCopyCodeSuccess"></v-md-preview>
      </el-dialog>
    </el-main>

    <template #footer>
      <!-- <el-button @click="visible = false">取 消</el-button>
      <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button> -->
    </template>
  </sc-dialog>
</template>

<script>
// 预览组件以及样式
import VMdPreview from '@kangc/v-md-editor/lib/preview';
// import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

import '@kangc/v-md-editor/lib/style/preview.css';
// VuePress主题以及样式（这里也可以选择github主题）
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// Prism
import Prism from 'prismjs';
// 代码高亮
import 'prismjs/components/prism-json';

// 选择使用主题
VMdPreview.use(vuepressTheme, {
  Prism,
});
VMdPreview.use(createCopyCodePlugin());

export default {
  components: { VMdPreview, vuepressTheme },
  emits: ['success', 'closed'],
  data() {
    return {
      apiObj: this.$API.aiWiki.knowledgeVectorPageList,
      search: {
        wikiDetailId: '',
      },
      mode: 'add',
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看',
      },
      visible: false,
      isSaveing: false,
      wikiDetailId: '',
      page: 1,
      size: 1000,
      form: {
        id: '',
        fileName: '',
        fileId: '',
        documentId: '',
      },
      vectorList: [],
      column: [
        {
          label: '向量索引',
          prop: 'index',
          width: '150',
        },
        {
          label: '向量值',
          prop: 'content',
          showOverflowTooltip: true,
        },
        {
          label: '操作',
          prop: 'operator',
          width: '150',
        },
      ],
      dialogVisible: false,
      vectorDetail: {
        id: '',
        content: '',
      },
    };
  },
  mounted() {},
  methods: {
    handleCopyCodeSuccess(data) {
      var that = this;
      this.$nextTick(() => {
        const textarea = document.createElement('textarea');
        textarea.value = data;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('Copy');
        document.body.removeChild(textarea);
        that.$message.success('已复制到剪切板');
      });
    },
    table_show(row) {
      this.dialogVisible = true;
      this.vectorDetail.id = row.id;
      this.vectorDetail.content = row.content;
    },
    async table_del(row) {
      var res = await this.$API.aiWiki.knowledgeVectorRemove.get(row.document_Id, row.wikiDetailId);
      if (res.code == 200) {
        this.$emit('success');
        this.visible = false;
        this.$message.success('操作成功');
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
    },
    //显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {},
    //表单注入数据
    async setData(data) {
      this.form = data;
      this.search.wikiDetailId = data.id;
      this.$nextTick(() => {
        this.$refs.table.upData(this.search);
      });
    },
  },
};
</script>

<style></style>
